<template>
  <div>
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="抢购商品"></el-step>
      <el-step title="订单确认"></el-step>
      <el-step title="支付成功"></el-step>
    </el-steps>
    <el-descriptions title="订单信息" :column="1" border>
      <el-descriptions-item label="购买人">
        {{ this.$store.state.username }}</el-descriptions-item>
      <el-descriptions-item label="产品名">{{
        this.$store.state.spikeDetail.goodsName
      }}</el-descriptions-item>
      <el-descriptions-item label="产品年利率">{{
        this.$store.state.spikeDetail.aagr
      }}</el-descriptions-item>
      <el-descriptions-item label="投资周期">{{
        this.$store.state.spikeDetail.term
      }}</el-descriptions-item>
      <el-descriptions-item label="属性"
        ><el-tag size="small">秒杀产品</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="产品详情">{{
        this.$store.state.spikeDetail.goodsDetail
      }}</el-descriptions-item>
      <el-descriptions-item label="产品原价"
        >{{
          this.$store.state.spikeDetail.goodsPrice / 10000
        }}万元</el-descriptions-item
      >
    </el-descriptions>

    <div class="payInfo">
      <el-card class="box-card" shadow="hover">
        <p>实付款:</p>
        <span style="color: rgb(255, 0, 54); font-size: 36px"
          >￥{{ this.$store.state.spikeDetail.seckillPrice / 10000 }}万元</span
        >
      </el-card>
    </div>
    <div style="text-align: center">
      <el-button @click="submitOrder" type="success">提交订单</el-button>
    </div>
    <!-- 订单成功弹窗 -->
    <el-dialog
      title="订单生成成功"
      :visible.sync="orderDialog"
      width="18%"
      :before-close="handleClose"
      center
    >
      <span style="color: red">请选择支付方式：</span>
      <span >
        <el-button type="primary" @click="submit" style="text-align:right;">余额支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { post } from "../utils/api";
export default {
  data() {
    return {
      active: 1,
      orderDialog: false, //订单成功弹窗
    };
  },
  methods: {
    submitOrder() {
      this.orderDialog = true;
      this.active += 1;
    },
    submit() {
      const must = this.$route.query.data;
      this.$http({
        method:"post",
        url:"/payment/paySeckillgoods/" + must
      }).then((resp) => {
        if (resp.code == 200) {
          this.active = 3;
          Message.success("支付成功！");
          this.orderDialog = false;
        } else {
          Message.info(resp.data);
        }
      })
      // post("api/payment/paySeckillgoods/" + must).then((resp) => {
      //   if (resp.code == 200) {
      //     this.active = 3;
      //     Message.success("支付成功！");
      //     this.orderDialog = false;
      //   } else {
      //     Message.info(resp.data);
      //   }
      // });
    },
    handleClose(done) {
      this.$confirm("确定取消订单吗？")
        .then((_) => {
          this.active -= 1;
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.payInfo {
  height: 130px;
  width: 300px;
  text-align: center;
  margin: 20px auto;
}
</style>